<template>
  <conbination-value-input
    :value="value"
    :multiple="multiple"
    :clearable="clearable"
    @click="this.openMainPicker"
    @icon1Click="$refs.systemVarComponent.toggleMenu()"
    @icon2Click="$refs.userMaualInputComponent.toggleMenu()"
    @removeItem="onRemoveItem"
  >
    <el-date-picker
      v-if="type === 'date' && multiple"
      type="dates"
      v-model="tempMultiDatesValue"
      ref="dateRef"
      :value-format="'yyyy-MM-dd'"
      @change="onMultiDatesSelected"
    />
    <el-date-picker
      v-if="type === 'date' && !multiple"
      type="date"
      v-model="tempSingleDateValue"
      ref="dateRef"
      :value-format="'yyyy-MM-dd'"
      @change="onSingleDateSelected"
    />
    <el-select
      v-if="type === 'select' && multiple"
      :multiple="true"
      v-model="tempMultiSelectValue"
      ref="selectRef"
      @change="onMultiSelectChange"
    >
      <el-option
        v-for="item in computedSelectOptions"
        :key="item.value"
        :value="item.value"
      >
        {{ item.label }}
      </el-option>
    </el-select>
    <el-select
      v-if="type === 'select' && !multiple"
      :multiple="false"
      v-model="tempSingleSelectValue"
      ref="selectRef"
      @change="onSingleSelectChange"
    >
      <el-option
        v-for="item in computedSelectOptions"
        :key="item.value"
        :value="item.value"
      >
        {{ item.label }}
      </el-option>
    </el-select>
    <!-- <VirtualSelect ref="systemVarComponent" v-model="sysVarValue" :multiple="multiple"/> -->
    <el-select :value="1" ref="systemVarComponent">
      <el-option :value="1">我是系统变量</el-option>
    </el-select>
    <el-select :value="1" ref="userMaualInputComponent">
      <el-option :value="1">我是用户手输</el-option>
    </el-select>
  </conbination-value-input>
</template>

<script>
import { cloneDeep } from "lodash";
import ConbinationValueInput from "./ConbinationValueInput.vue";
// import VirtualSelect from "./VirtualSelect.vue";
const ITEM_TYPE = {
  BASIC: "BASIC",
  SYS_VAR: "SYS_VAR",
  MANUAL_INPUT: "MANUAL_INPUT",
};
export default {
  name: "FilterValueInput",
  components: {
    ConbinationValueInput,
    // VirtualSelect
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    computedSelectOptions() {
      const options = cloneDeep(this.selectOptions);
      this.value
        .filter((v) => v.type === ITEM_TYPE.BASIC)
        .forEach((item) => {
          const exists = options.find((v) => v.value === item.value);
          if (!exists) {
            options.push(cloneDeep(item));
          }
        });
      return options;
    },
  },
  provide() {},
  data() {
    return {
      tempMultiDatesValue: [],
      tempSingleDateValue: null,
      tempMultiSelectValue: [],
      tempSingleSelectValue: null,
      sysVarValue: null,
      selectOptions: [{ value: 3, label: "下拉选xxx" }],
    };
  },
  mounted() {},
  methods: {
    openMainPicker() {
      if (this.type === "date") {
        this.$refs.dateRef.focus();
      } else {
        this.$refs.selectRef.toggleMenu();
      }
    },
    onMultiDatesSelected(dateArr) {
      const arr = cloneDeep(this.value);
      dateArr.forEach((date) => {
        const idx = arr.findIndex((v) => v.value === date);
        if (idx != -1) {
          arr.splice(idx, 1);
        }
        arr.push({
          label: date,
          value: date,
          type: ITEM_TYPE.BASIC,
        });
      });
      this.$emit("input", arr);
      this.emitChange();
    },
    onSingleDateSelected(date) {
      const arr = [
        {
          label: date,
          value: date,
          type: ITEM_TYPE.BASIC,
        },
      ];
      this.$emit("input", arr);
      this.emitChange();
    },
    onMultiSelectChange(valueArr) {
      const arr = cloneDeep(this.value).filter(
        (v) => v.type !== ITEM_TYPE.BASIC
      );
      valueArr.forEach((val) => {
        const item = this.selectOptions.find((v) => v.value === val);
        arr.push({
          ...item,
          type: ITEM_TYPE.BASIC,
        });
      });
      this.$emit("input", arr);
      this.emitChange();
    },
    onSingleSelectChange(value) {
      const item = this.selectOptions.find((v) => v.value === value);
      const arr = [
        {
          ...item,
          type: ITEM_TYPE.BASIC,
        },
      ];
      this.$emit("input", arr);
      this.emitChange();
    },
    onRemoveItem(item) {
      const arr = cloneDeep(this.value);
      const idx = arr.findIndex((i) => i.value === item.value);
      if (idx != -1) {
        arr.splice(idx, 1);
      }
      this.$emit("input", arr);
      this.emitChange();
    },
    onClear() {
      this.$emit("input", []);
      this.emitChange();
    },
    emitChange() {
      let result;
      if (this.multiple) {
        result = this.value.map((v) => v.value);
      } else {
        if (this.value && this.value.length > 0) {
          result = this.value[0].value;
        } else {
          result = null;
        }
      }
      this.$emit("change", result);
    },
  },
};
</script>
<style scoped>
</style>
